<template>
  <!-- home页面的信息栏 -->
  <!-- 6月27号--------------6月27号----是home的子组件---------- -->
  <div class="artist-list">
    <!-- 用的是Vant list列表的 下拉刷新框架 -->

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- van-cell组件显示的文本只是标题  但是还需要在标题的下方显示图片
    所以找到 Vant cell 单元格查找里面的方法 可以给这个cell标签的下方设置内容
    label 自定义标题下方 label 的内容
       -->
        <!-- @click="toDetail(item.art_id)" 6月29号----------------6月29号----------------- -->
        <!-- articleList.vue页面把文章id传给 article.vue页面  -->
        <van-cell
          v-for="item in list"
          :key="item.art_id"
          :title="item.title"
          @click="toDetail(item.art_id)"
        >
          <!-- 使用具名插槽 自定义的结构 包在van-cell标签里面 -->
          <template #label>
            <!-- 图片需要在控制台vue里面的articleList里面的list数组 cover 里面的images 里面的type值代表图片有多少张 -->
            <!-- 主体内容区域  图片区域-因为服务器返回的数据里面图片不是固定的,有的是一张,有的是三张-->
            <!-- 所以:column-num="3"自定义行行数就不能固定,而是要取服务器里面的images图片数量 item.cover.type -->
            <van-grid :border="false" :column-num="item.cover.type">
              <!-- 图片列表的循环也是 in item.covre.images -->
              <!-- 注意 因为服务器的images他就是一个字符串数组,所以这里取值得时候,什么都不需要点直接写一个:src="item"-->
              <!-- 6月29号----------------6月29号----------------- -->
              <!-- 在van-image 标签添加了 lazy-load 图片懒加载-->
              <van-grid-item
                v-for="(item, index) in item.cover.images"
                :key="index"
              >
                <van-image lazy-load fit="cover" :src="item" />
              </van-grid-item>
            </van-grid>
            <!-- 底部额外信息区域 -->
            <div class="meta">
              <!-- 左侧 -->
              <div class="info-box">
                <span>{{ item.aut_name }}</span>
                <span>{{ item.comm_count }}评论</span>
                <span>{{ item.pubdate | timeFilters }}</span>
              </div>
              <!-- 右侧 -->
              <!-- Vant icon样式 name="cross" 就是一个x -->
              <van-icon name="cross"></van-icon>
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 导入home.js里面的 getArticles 获取频道推荐的文章接口
import { getArticles } from '../../api/home.js'
// 6月29号------------------------6月29号-------------------
// moment 的核心作用就是 日期的格式化
// import moment from 'moment'
// 设置语音环境 i18n  是moment提供的,语音包是在 node_modules里面moment里面locale/zh-cn.js
// 国际化 也叫 i18n  internationalization的缩写
// moment.locale('zh-cn')
// 上面得 moment 和设置语言环境不需要用了,在src/filters/filters.js写了全局过滤器(时间)
// -------------------------------------------------------------------------
export default {
  name: 'articleList',
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      timestamp: undefined
    }
  },
  props: ['channelId'],
  created () {
    //   打印一下是否能拿到hoem.vue父组件<articleList :channelId="item.id"></articleList>传递过来的id
    console.log(this.channelId)
  },
  methods: {
    // 6月27号---------------------6月27号----------------------------
    // 注意一个细节,直接调用接口的时候都是在 created 里面调用的
    // 如果没有Vant List 列表组件 用created调用是没有问题的
    // 但是现在是用 List组件去获取数据(自动会触底加载跟多数据)(所以就不需要再created里面去调接口)
    // 直接把数据的获取放在 onLoad 里面
    // 第一个参数是 channelId 第二个是时间蹉(时间戳默认请求的时候用当前的时时间就好了)
    // 但是如果需要获取第二页 第三页...就需要去拿到上一次的时间戳(所以在data中加一个字段)
    // timestamp:undefined 默认设置一个undefined,相当于是默认不给值,因为要在后面调接口的时候赋值,这样合理
    // 用异步函数做的
    async onLoad () {
      if (this.timestamp === undefined) {
        //  判断本地时间戳(没有时间), 就设置初始值
        this.timestamp = Date.now()
      }
      const res = await getArticles({
        channel_id: this.channelId,
        timestamp: this.timestamp
      })
      // 看看能不能获取到 (打印出来有一个时间戳 pre_timestamp: 16248732989 还有对应的 results对象里面的文章数据)
      // console.log('res', res)
      // 下拉刷新的判断
      if (this.refreshing) {
        this.list = []
        this.refreshing = false
      }
      // 添加数据(不需要用Vant list列表的for循环代码,这里需要添加获取到服务器里面的数据)
      this.list.push(...res.data.data.results)
      // 同时一会获取下一页数据的时候(注意,需要把 pre_timestamp 时间戳拿到)所以保存时间戳
      // 也就是说保存了不一样的数据戳,服务器就会给另外的文章(这是目前这个案例保存时间戳的作用)
      this.timestamp = res.data.data.pre_timestamp
      // 获取数据之后把 loading 关闭 同时判断是否触底
      this.loading = false
      // 最多100条哦
      if (this.list.length >= 88) {
        this.finished = true
      }
      // 下拉刷新和获取数据后判断触底的逻辑全部写在了上面,这里就不需要了,Vant list列表里面的方法,参考用
      // setTimeout(() => {
      //   if (this.refreshing) {
      //     this.list = []
      //     this.refreshing = false
      //   }

      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1)
      //   }
      //   this.loading = false

      //   if (this.list.length >= 40) {
      //     this.finished = true
      //   }
      // }, 1000)
    },
    onRefresh () {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    //  6月29号------------------------6月29号-------------------6月29号
    toDetail (id) {
      // 点击去到 文章详情页 (记得需要带item.art_id过去)
      // 第一种方法
      // 直接给地址跳转 ,子组件/detail.vue页面的{{ $route.params.id }}就显示998
      // 父组件带什么参数,子组件那边就显示什么参数
      // this.$router.push('/detail/998')
      // --------------------------------------------------
      // 第二种方法 常用  动态路由传参 作用 注册完毕之后,参数的传递和接收就固定了,格式必须固定,不容易出错
      // 注意注意重点,之前给的path---现在这里不能用path了----------注意注意重点
      // 而是必须要给name,而这个name就是router/index.js里面注册路由的时候设置的name属性
      // (这里是indexjs注册时候用的 path: '/detail/:id',name: 'detail', component: detail)
      // 后面在跟params:{id} 注意这里面的id 须是注册路由时的 :xxx想对应才能传值过去(/detail/:id')
      this.$router.push({ name: 'article', params: { id } })
    }
  }
  // filters: {
  //   // 6月29号------------------------6月29号-------------------
  //   // 上面得 moment 和设置语言环境不需要用了,在src/filters/filters.js写了全局过滤器(时间)
  //   // filters就是过滤器的意思
  //   timeFilters (value) {
  //     return moment(value).fromNow()
  //   }
  // }
}
</script>

<style lang="less">
.artist-list {
  .meta {
    display: flex;
    justify-content: space-between;
    span {
      margin-right: 10px;
    }
  }
}
</style>
